<template>
    <div class="city-tab">
        <iscroll-view ref="scrollView" class="scroll-view sub-tabs-area1" :options="{scrollX: true,preventDefault: false}" :scrollerClass="{'scroller':true}">
           <span class="tab-item1"
                 v-for="(item, index) in config.sub.arr"
                 v-bind:class="{active: index === config.sub.activeIndex, 'has-not-read-msgs': item.notReadNum > 0}"
                 @click="config.sub.activeIndex = index;selectSubTypeFn(item.id)">{{ item.cn_name }}</span>
        </iscroll-view>
    </div>
</template>
<script>
    export default{
        props: ['name', 'config', 'selectSubTypeFn'],
        updated () {
        this.$refs.scrollView.refresh()
    },
    data () {
        return {}
    }
    }
</script>
<style  lang="scss">
    @import "../assets/base";
    .city-tab{
        padding: 0 rpx(5) 0 rpx(5);
        position: relative;
        z-index: 1;
        background: #F5F5F5;
        border-top: rpx(1) solid #cccccc;
    }
    .sub-tabs-area1{
        touch-action: none;
        -webkit-transform:translate3d(0,0,0);
        overflow: hidden;
        z-index: 1;
        .scroller, ul.tabs{
            display: inline-flex;
            align-items: center;
            height: rpx(100);
            .tab-item1{

                position: relative;
                margin-right: rpx(16);
                padding: rpx(10) rpx(30);
                line-height: rpx(45);
                height: rpx(40);
                /*background: yellowgreen;*/
                /*width: rpx(350);*/
                border: rpx(1) solid #666666;
                border-radius: rpx(40);
                font-size: rpx(28);
                color:#333333;
                white-space: nowrap;
                &.active{
                     color: #fff;
                     background:#ff7d00;
                     border: rpx(1) solid #ff7d00;
                        &:after {
                             position: absolute;
                             bottom: 0;
                             display: none;
                             content: '';
                             width: 100%;
                             height: rpx(0);
                             background:#FFFFFF;
                         }
                }
                &:nth-last-child(1){
                     margin-right: 0;
                 }
            }
        }
    }
</style>